<template>
  <div class="weather">
    <i
      class="el-icon-close closeIcon iicon"
      style="font-weight:700;font-size:14px" 
    ></i>
    <div class="weather_now">
      <div class="weather_left">
        <div class="weather_btn">
          <div class="shishitj">
            <iframe
              scrolling="no"
              src="https://tianqiapi.com/api.php?style=te&skin=pitaya&city=东营"
              frameborder="0"
              width="248"
              height="24"
              color="#fff"
              allowtransparency="true"
            ></iframe>
          </div>
          <div class="btnjiance">天气监测</div>
        </div>
        <div class="tianqi">
          <iframe
            scrolling="no"
            src="https://tianqiapi.com/api.php?style=ya&skin=pitaya&&city=东营"
            frameborder="0"
            width="100%"
            height="100%"
            allowtransparency="true"
          ></iframe>
        </div>
        <div class="yuntu">
          <baidu-map
            id="map"
            :center="region"
            :zoom="10"
            @ready="handler"
            :scroll-wheel-zoom="true"
            :dragging="true"
          ></baidu-map>
        </div>
      </div>
      <div class="weather_right">
        <div class="right_top">
          <div id="ehart1" ref="ehart1" :style="{width: '100%', height: '33%'}"></div>
          <div id="ehart2" ref="ehart2" :style="{width: '100%', height: '33%'}"></div>
          <div id="ehart3" ref="ehart3" :style="{width: '100%', height: '33%'}"></div>
        </div>
        <div class="right_bottom">
          <div class="rb_tq">
            <iframe
              scrolling="no"
              src="https://tianqiapi.com/api.php?style=ts&skin=pitaya&&city=东营"
              frameborder="0"
              width="100%"
              height="100%"
              allowtransparency="true"
            ></iframe>
          </div>
          <div class="rb_yj">暂无预警</div>
          <div class="rb_zl">
            <p>东营市平均空气质量（AQI）（省环保厅提供）</p>
            <div class="kq_status">
              <div class="you">优</div>
              <div class="liang">良</div>
              <div class="qidu">轻度污染</div>
              <div class="zhongdu">重度污染</div>
              <div class="yanzhong">严重污染</div>
            </div>
            <!-- <div class="zhibiao">55</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      weatherShow:false
    }
  },
  methods: {
    getWeatherInfo() {
      this.weatherShow = true;
    }
  },
}
</script>
<style lang="less">
  .weather {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(243, 247, 255, 1);
  box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
  z-index: 999;
  border-radius: 4px;
  .iicon {
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 9999;
    box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
  }
  .weather_now {
    width: 100%;
    height: 100%;
    display: flex;
    .weather_left {
      width: 25%;
      height: 100%;
      .tianqi {
        height: 424px;
        margin-top: 100px;
        width: 247px;
       
     
        background: rgba(243, 247, 255, 1);
        box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
      }
      .yuntu {
        width: 100%;
        height: 40%;
        box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
      }
      .map {
        width: 100%;
        height: 100%;
      }
    }
    .weather_right {
      width: 75%;
      height: 100%;
      box-sizing: border-box;
      .right_top {
        width: 100%;
        height: 60%;
        // background-color: #30ee6f;
      }
      .right_bottom {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 40%;
        background-color: #ccc;
        .rb_tq {
          width: 40%;
          background-color: rgba(61, 133, 253, 1);
          height: 100%;
          box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
        }
        .rb_yj {
          width: 18%;
          height: 100%;
          box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
          background-color: #ddd;
        }
        .rb_zl {
          width: 40%;
          height: 100%;

          box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
          position: relative;
          background-color: #ddd;
          .kq_status {
            margin: 20px auto;
            display: flex;
            width: 100%;
            height: 44px;
            .you {
              width: 10%;
              height: 100%;
              color: #fff;
              background-color: green;
            }
            .liang {
              width: 10%;
              height: 100%;
              color: #fff;
              background-color: yellow;
            }
            .qidu {
              width: 30%;
              height: 100%;
              color: #fff;
              background-color: orangered;
            }
            .zhongdu {
              width: 25%;
              height: 100%;
              color: #fff;
              background-color: #444;
            }
            .yanzhong {
              width: 25%;
              height: 100%;
              color: #fff;
              background-color: #000;
            }
          }
          .zhibiao {
            position: absolute;
            width: 22px;
            height: 22px;
            top: 126px;
            left: 12%;
            background-color: #fff;
            &::before {
              content: "";
              position: absolute;
              width: 2px;
              height: 40px;
            }
          }
        }
      }
    }

  }
}
</style>
